<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MyVue</title>
</head>
<style>
  #box {
    width: 100px;
    height: 40px;
    background-color: bisque;
  }
</style>

<body>
  <div id="#app">
    msg数据------{{msg}}
    <p>{{msg}}</p>
    <p id="ppp" v-text="testStr" class="aaa" name="aaa" title='p'></p>
    <button @click="handleClick">点击</button>
    <button @dblclick="handleDbclick">双击</button>
    <p v-html="htmlStr"></p>
    <div id="box" @mouseenter="mouseenter" @mouseleave="mouseleave">
      {{obj.a}}
    </div>
    <p>a标签：<a v-href="hrefStr">vue-mini-library</a></p>
    <div v-class="className" class="a b c">检测v-class：{{className}}</div>
    <input type="text" v-model="modelStr">
  </div>

  <script src="./myvue.js"></script>
  <script src="./observe.js"></script>
  <script src="./compiler.js"></script>
  <script src="./watcher.js"></script>
  <script>
    let vm = new MyVue({
      el: "#app",
      data: {
        msg: "我是msg",
        obj: {
          a: "鼠标移入此处"
        },
        className: "box",
        testStr: "我是testStr",
        htmlStr: "<span>我是htmlStr</span>",
        modelStr: "v-model绑定数据",
        hrefStr: "https://github.com/shellingfordly/vue-mini-library"
      },
      methods: {
        handleClick() {
          this.msg = "被点击更新的msg数据"
          this.testStr = "被点击更新的testStr数据"
        },
        handleDbclick() {
          this.msg = "被双击更新的msg数据"
          this.htmlStr = "<span>被双击更新的htmlStr数据</span>"
        },
        mouseenter() {
          this.obj.a = "移入了鼠标"
        },
        mouseleave() {
          this.obj.a = "移出了鼠标"
        }
      },
    })
  </script>
</body>

</html>